<template>
    <div id="app">
        <div id="main" style="width: 1600px;height: 1200px">
        </div>
    </div>
</template>

<script>
    import * as echarts from "echarts";
    import axios from 'axios';

    export default {
        name: 'app',
        mounted() {
            var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;

            var upColor = '#00da3c';
            var downColor = '#ec0000';

            const _this = this;
            axios.get(ROOT_PATH + '/data/asset/data/stock-DJI.json', {}).then(function (rawData) {
                var data = _this.splitData(rawData.data);
                myChart.setOption(option = {
                    animation: true,
                    legend: {
                        bottom: 10,
                        left: 'center',
                        data: ['Dow-Jones index', 'MA5', 'MA10', 'MA20', 'MA30']
                    },
                    /**
                     * 提供十字
                     */
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        },
                        borderWidth: 1,
                        borderColor: '#ccc',
                        padding: 10,
                        textStyle: {
                            color: '#000'
                        },
                        position: function (pos, params, el, elRect, size) {
                            var obj = {top: 10};
                            obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
                            return obj;
                        }
                        // extraCssText: 'width: 170px'
                    },
                    /**
                     * 提供联动
                     */
                    axisPointer: {
                        link: {xAxisIndex: 'all'},
                        label: {
                            backgroundColor: '#777'
                        }
                    },
                    toolbox: {
                        feature: {
                            dataZoom: {
                                yAxisIndex: false
                            },
                            brush: {
                                type: ['lineX', 'clear']
                            }
                        }
                    },
                    brush: {
                        xAxisIndex: 'all',
                        brushLink: 'all',
                        outOfBrush: {
                            colorAlpha: 0.1
                        }
                    },
                    visualMap: {
                        show: false,
                        seriesIndex: 5,
                        dimension: 2,
                        pieces: [{
                            value: 1,
                            color: downColor
                        }, {
                            value: -1,
                            color: upColor
                        }]
                    },
                    grid: [
                        {
                            left: '10%',
                            right: '8%',
                            height: '20%'
                        },
                        {
                            left: '10%',
                            right: '8%',
                            top: '25%',
                            height: '20%'
                        }
                        ,
                        {
                            left: '10%',
                            right: '8%',
                            top: '50%',
                            height: '20%'
                        }
                    ],
                    xAxis: [
                        {
                            type: 'category',
                            data: data.categoryData,
                            scale: true,
                            boundaryGap: false,
                            axisLine: {onZero: false},
                            axisLabel: {show: false},
                            splitLine: {show: false},
                            splitNumber: 20,
                            min: 'dataMin',
                            max: 'dataMax',
                            axisPointer: {
                                z: 100
                            }
                        },
                        {
                            type: 'category',
                            gridIndex: 1,
                            data: data.categoryData,
                            scale: true,
                            boundaryGap: false,
                            axisLine: {onZero: false},
                            axisTick: {show: false},
                            splitLine: {show: false},
                            axisLabel: {show: true},
                            splitNumber: 20,
                            min: 'dataMin',
                            max: 'dataMax'
                        },
                        {
                            type: 'category',
                            gridIndex: 2,
                            data: data.categoryData,
                            scale: true,
                            boundaryGap: false,
                            axisLine: {onZero: false},
                            axisTick: {show: false},
                            splitLine: {show: false},
                            axisLabel: {show: true},
                            splitNumber: 20,
                            min: 'dataMin',
                            max: 'dataMax'
                        }

                    ],
                    yAxis: [
                        {
                            scale: true,
                        },
                        {
                            scale: true,
                            gridIndex: 1,
                            splitNumber: 2,
                        }
                        ,
                        {
                            scale: true,
                            gridIndex: 2,
                            splitNumber: 2,
                        }
                    ],
                    dataZoom: [
                        {
                            type: 'inside',
                            xAxisIndex: [0, 1, 2],
                            start: 0,
                            end: 100
                        },
                        {
                            show: true,
                            xAxisIndex: [0, 1, 2],
                            type: 'slider',
                            top: '75%',
                            start: 0,
                            end: 100
                        },

                        {
                            type: 'inside',
                            yAxisIndex: [0],
                            start: 0,
                            end: 100
                        },
                        {
                            show: true,
                            yAxisIndex: [0],
                            type: 'slider',
                            top: '5%',
                            start: 0,
                            end: 100
                        }
                        ,

                        {
                            type: 'inside',
                            yAxisIndex: [1],
                            start: 0,
                            end: 100
                        },
                        {
                            show: true,
                            yAxisIndex: [1],
                            type: 'slider',
                            top: '30%',
                            start: 0,
                            end: 100
                        }
                        ,

                        {
                            type: 'inside',
                            yAxisIndex: [2],
                            start: 0,
                            end: 100
                        },
                        {
                            show: true,
                            yAxisIndex: [2],
                            type: 'slider',
                            top: '55%',
                            start: 0,
                            end: 100
                        }
                    ],
                    series: [
                        {
                            name: 'line',
                            type: 'line',
                            data: data.volumes,
                        },
                        {
                            name: 'Volume',
                            type: 'line',
                            xAxisIndex: 1,
                            yAxisIndex: 1,
                            data: data.volumes
                        },
                        {
                            name: 'Volume',
                            type: 'line',
                            xAxisIndex: 2,
                            yAxisIndex: 2,
                            data: data.volumes
                        }
                    ]
                }, true);

                myChart.dispatchAction({
                    type: 'brush',
                    areas: [
                        {
                            brushType: 'lineX',
                            coordRange: ['2016-06-02', '2016-06-20'],
                            xAxisIndex: 0
                        }
                    ]
                });
            });

            option && myChart.setOption(option);

        },
        methods: {
            splitData(rawData) {
                var categoryData = [];
                var values = [];
                var volumes = [];
                for (var i = 0; i < rawData.length; i++) {
                    categoryData.push(rawData[i].splice(0, 1)[0]);
                    values.push(rawData[i]);
                    volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]);
                }

                return {
                    categoryData: categoryData,
                    values: values,
                    volumes: volumes
                };
            },
            calculateMA(dayCount, data) {
                var result = [];
                for (var i = 0, len = data.values.length; i < len; i++) {
                    if (i < dayCount) {
                        result.push('-');
                        continue;
                    }
                    var sum = 0;
                    for (var j = 0; j < dayCount; j++) {
                        sum += data.values[i - j][1];
                    }
                    result.push(+(sum / dayCount).toFixed(3));
                }
                return result;
            }
        }
    }
</script>

